<mat-card class="my-4">
  <mat-card-header
    class="mat-elevation-z2 custom-card-header justify-content-between"
  >
    <mat-card-title class="mat-h1">All Books</mat-card-title>
    <div>
      <button
        class="mat-elevation-z4"
        mat-raised-button
        [routerLink]="['/admin/books/new']"
      >
        Add Book
      </button>
    </div>
  </mat-card-header>
  <div *ngIf="dataSource.data.length > 0; else nodata">
    <mat-card-content>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Search</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Search" />
      </mat-form-field>
      <div class="mat-elevation-z2">
        <table mat-table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
            <td mat-cell *matCellDef="let row">{{ row.bookId }}</td>
          </ng-container>

          <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
            <td mat-cell *matCellDef="let row">{{ row.title }}</td>
          </ng-container>

          <ng-container matColumnDef="author">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Author</th>
            <td mat-cell *matCellDef="let row">{{ row.author }}</td>
          </ng-container>

          <ng-container matColumnDef="category">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
            <td mat-cell *matCellDef="let row">{{ row.category }}</td>
          </ng-container>

          <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Price</th>
            <td mat-cell *matCellDef="let row">
              {{ row.price | currency : "INR" }}
            </td>
          </ng-container>
          <ng-container matColumnDef="operation">
            <th mat-header-cell *matHeaderCellDef>Operation</th>
            <td mat-cell *matCellDef="let row">
              <button
                mat-icon-button
                color="primary"
                [routerLink]="['/admin/books/', row.bookId]"
              >
                <mat-icon aria-label="Edit">edit</mat-icon>
              </button>
              <button
                mat-icon-button
                color="accent"
                (click)="deleteConfirm(row.bookId)"
              >
                <mat-icon>delete</mat-icon>
              </button>
            </td>
          </ng-container>

          <tr
            mat-header-row
            *matHeaderRowDef="displayedColumns; sticky: true"
          ></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="4">No data matching the filter</td>
          </tr>
        </table>
        <mat-paginator [pageSizeOptions]="[5, 10, 25, 50]"></mat-paginator>
      </div>
    </mat-card-content>
  </div>

  <ng-template #nodata>
    <mat-card-header>
      <mat-card-title class="mat-h1">No movies found</mat-card-title>
    </mat-card-header>
  </ng-template>
</mat-card>
